<template>
  <div class="v-mfr-contacts">
    <c-row-search>
      <el-form :model="form" ref="form" inline @submit.native.prevent>
        <el-form-item prop="keywordSearch">
          <!-- 搜索姓名/电话/邮箱 -->
          <el-input
            v-model="form.keywordSearch"
            clearable
            @keyup.enter.native="search"
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            {{ multLang('btn_search_a') }}
          </el-button>
        </el-form-item>
      </el-form>
      <template #right>
        <!-- v-if="auth.isAdd" -->
        <el-button type="primary" @click="addContacts">
          <c-icon name="plus"></c-icon>
          {{ multLang('btn_new_a') }}
        </el-button>
      </template>
    </c-row-search>
    <c-table ref="table" :data="table.data" :col="table.col">
      <template #opn="{ row }" v-if="auth.isEdit || auth.isDelete">
        <el-button v-if="auth.isEdit" type="text" @click="edit(row)">
          <c-icon name="edit"></c-icon>
          <span>
            {{ multLang('btn_edit_a') }}
          </span>
        </el-button>
        <el-button v-if="auth.isDelete" type="text" @click="del(row)">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>
      </template>
    </c-table>
    <add-Edit v-if="addEditisShow" @close="close"></add-Edit>
  </div>
</template>
<script>
import { querycontacts } from '@/http/api/v1/mfr'
import addEdit from './addEdit.vue'
export default {
  name: 'VMfrcontacts',
  props: {
    info: {
      type: Object,
      default() {
        return {}
      }
    },
    auth: { type: Boolean, default: true }
  },
  data() {
    return {
      form: { keywordSearch: '' },
      table: {
        data: [],
        col: [
          { label: '联系人姓名', prop: 'name' },
          { label: '电话', prop: 'description' },
          { label: '邮箱', prop: 'name2' },
          { label: '微信', prop: 'description2' }
        ]
      },
      addEditisShow: false
    }
  },
  watch: {
    info: {
      deep: true,
      handler(val) {
        console.log('info', val)
      }
    }
  },
  components: { addEdit },
  computed: {},
  mounted() {
    this.search()
  },
  methods: {
    search() {
      // table.data
      var data = {
        org_id: this.info.id,
        keywordSearch: this.form.keywordSearch
      }
      querycontacts(data).then(res => {
        console.log('联系人列表', res)
      })
    },
    addContacts() {
      // 新增/编辑 联系人
      this.addEditisShow = true
    },
    close() {
      this.addEditisShow = false
    },
    edit(row) {
      console.log('edit', row)
    },
    del(row) {
      console.log('del', row)
    }
  }
}
</script>
<style lang="scss">
.v-mfr-contacts {
}
</style>
